<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        
        .box{
            position: relative;
            width: 500px;
            /* height: 100px; */
            display: flex;
        }

        img{
            width: 50px;
            height: 50px;
            border-radius: 25px;
            display: block;
        }

        textarea{
            width: 300px;
            height: 60px;
            border: 1px solid gray;
            outline: none;
            padding:5px ;
            border-radius: 5px;
            margin: 0px 10px;
            transition: all 0.5s;
        }

        textarea:focus{
            height: 80px;
        }

        button{
            position: absolute;
            right: 55px;
            top: 5px;
            width: 60px;
            height: 60px;
            background-color: #00aeec;
            border: none;
            color: white;
            border-radius: 5px;
        }

        p{ 
            font-size: 14px;
            color:gray;
            opacity: 0;
            margin-left: 320px;
            transition: all 0.5s;
        }
        
    </style>
</head>
<body>
    
    <div class="box">
        <img src="../第五单元作业/images/course04.png">
        <!-- <input type="text" placeholder="发一条友善的评论"> -->
         <textarea name="" id="" placeholder="发一条友善的评论" maxlength="200"></textarea>
        <button>发布</button>
    </div>
    <p>0/200字</p>
    
    <script>
        const text = document.querySelector('textarea')
        const p = document.querySelector('p') 
        let num = 0 
        // 判断用输入事件input
        text.addEventListener('input',function(){
            // 不断取得文本框里面的字符长度，文本域.value.length
            const num = text.value.length
             // 把获得数字给下面文本框
            p.innerHTML = `${num}/200字`
        })
        //获取焦点
        text.addEventListener('focus',function(){
            p.style.opacity = 0.8
        })
        //失去焦点
        text.addEventListener('blur',function(){
            p.style.opacity = 0
        })
    </script>
    
</body>
</html>